<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悦听—天天打卡</title>
    <link rel="stylesheet" href="../css/index.css">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
          minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
</head>
<body>

<div class="container">

    <div class="content">
        <div class="player">
            <img class="article-imag" id="audio_image" src="../img/article.jpeg">
            <div class="article-name-author article-name">
            </div>
            <img  class="play-icon js-play" src="../img/play@3x.png">
            <img  class="play-icon hidden js-stop" src="../img/stop@3x.png">
        </div>

        <div class="playerLine">
            <div class="play-time"></div>
        </div>
        <div class="show-time">
            <div class="played-time" >
                00:00
            </div>
            <div class="all-play-time">
                00:00


            </div>
        </div>
        <div class="box">
            <div class="top-cloud">
                <div class="cloud"></div>
                <div class="gradual-changge-top"></div>
            </div>
            <div class="foot-cloud">
                <div class="gradual-changge-foot"></div>
                <div class="cloud"></div>
            </div>
            <div class="article" id="article_content">

            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-content">
            <img class="ad-logo" src="../img/logo.svg">
            <div class="heyni">
                <div class="ad-title">Heyni Talk</div>
                <div class="ad-slogan">标准中文口语学习平台</div>
            </div>
            <button class="load">点击下载</button>
        </div>
    </div>
</div>

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/audio.js"></script>

<script>
    var id = document.location.pathname.split('/').pop();
    console.log("--------"+document.location.pathname);
    $.ajax({
        url:'http://live.4d4k.com/api/share/'+ id+'/article',
        method:'get',
        success:function(data){
            showInfo(data)
        }})
    setTimeout(function(){
        var data = {
            "error": 0,
            "msg": "成功",
            "data": {
                "id": "nZk34eBNPEPZWL",
                "book_id": "0Wx3qb3lD8GZYM",
                "zh_title": "风筝",
                "en_title": "Kite",
                "click_num": 280,
                "state": 1,
                "sort": 1,
                "user_id": 2,
                "created_at": "2018-08-14 19:37:20",
                "updated_at": "2018-08-30 14:17:52",
                "radio_url": "http://heyni.oss-cn-beijing.aliyuncs.com/radios/rGK7ChyrjF.mp3?OSSAccessKeyId=jvXdO4ZiFJSIbSmt&Expires=1535683071&Signature=j6rHIKT8Ob%2FrHZs3PnQ6ze4O1bg%3D",
                "image_url": "http://heyni.oss-cn-beijing.aliyuncs.com/articles/LhAS1jkd0BCpMeN4VsC2t9vniNCrkoThiJpY8PaW.jpeg?x-oss-process=image%2Fresize%2Cm_fixed%2Cl_400&OSSAccessKeyId=jvXdO4ZiFJSIbSmt&Expires=1535683072&Signature=OnxJBIWDULKdERUWFSZSr6uB9lU%3D",
                "radio_time": 71,
                "radio_size": "1.6 mb",
                "deleted_at": null,
                "audio_paragraphs": [
                    {
                        "id": "0ak3XPzKmYkNmn",
                        "article_id": "nZk34eBNPEPZWL",
                        "book_id": "0Wx3qb3lD8GZYM",
                        "zh_text": "我们经常可以在中国的公园和广场上空看到风筝，这是一种单纯依靠空气动力飞行的玩具，可以随着风飞上天空。细线连接着人和天上的风筝。人可以通过细线，在地面操控风筝。",
                        "en_text": "There are full of kites in parks and plazas. A kite refers to a toy that is driven by wind. Its lines connect people and kites in the sky, so that people can control them.",
                        "start_at": 0,
                        "end_at": 0,
                        "sort": 1,
                        "user_id": 2,
                        "created_at": "2018-08-14 19:38:29",
                        "updated_at": "2018-08-14 19:38:29"
                    },
                    {
                        "id": "0Bv648RXK5ApK0",
                        "article_id": "nZk34eBNPEPZWL",
                        "book_id": "0Wx3qb3lD8GZYM",
                        "zh_text": "风筝起源于中国，由古代的劳动人民发明，出现于距现在两千多年的春秋时期。",
                        "en_text": "The kite originated in China and was invented by the ancient labouring people in the Spring and Autumn Period more than two thousand years ago.",
                        "start_at": 20,
                        "end_at": 0,
                        "sort": 2,
                        "user_id": 2,
                        "created_at": "2018-08-14 19:39:47",
                        "updated_at": "2018-08-14 19:39:47"
                    },
                    {
                        "id": "nkklA4xXOOyObn",
                        "article_id": "nZk34eBNPEPZWL",
                        "book_id": "0Wx3qb3lD8GZYM",
                        "zh_text": "不久，风筝就成为了传递消息的工具。到了宋代，放风筝成为了人们喜爱的户外活动。这时的风筝，已经是我们现代常见的样子。",
                        "en_text": "Soon after, kites was used to deliver messages. In the Song Dynasty, flying kites became a favourite outdoor activity. Consequently, the kite was familiar.",
                        "start_at": 29,
                        "end_at": 0,
                        "sort": 3,
                        "user_id": 2,
                        "created_at": "2018-08-14 19:41:02",
                        "updated_at": "2018-08-14 19:41:02"
                    },
                    {
                        "id": "0Bv64wbz11WxD0",
                        "article_id": "nZk34eBNPEPZWL",
                        "book_id": "0Wx3qb3lD8GZYM",
                        "zh_text": "人们用竹子制成各种形状的骨架，在骨架上覆盖纸，最后进行装饰与美化。风筝上的装饰图案一般都有吉祥的寓意。",
                        "en_text": "People use bamboo to make skeletons of various shapes, cover it with paper, and finally decorate and beautify. Generally speaking, the patterns on the kites mean various things.",
                        "start_at": 42,
                        "end_at": 0,
                        "sort": 4,
                        "user_id": 2,
                        "created_at": "2018-08-14 19:41:43",
                        "updated_at": "2018-08-14 19:41:43"
                    },
                    {
                        "id": "0Vv35mE2yr9oG0",
                        "article_id": "nZk34eBNPEPZWL",
                        "book_id": "0Wx3qb3lD8GZYM",
                        "zh_text": "中国的山东省潍坊市被各国推崇为“世界风筝之都”。潍坊是中国著名风筝产地，有许多手艺高超的风筝制作者。每年潍坊都会举行国际性的风筝节。",
                        "en_text": "Weifang, Shandong, China is regarded as the \"world kite capital\" by various countries. There is a lot of famous Chinese kites with many skilled artisans. Every year, Weifang will hold an international kite festival.",
                        "start_at": 54,
                        "end_at": 0,
                        "sort": 5,
                        "user_id": 2,
                        "created_at": "2018-08-14 19:42:10",
                        "updated_at": "2018-08-14 19:52:56"
                    }
                ],
                "book_title": "传统的中国文化",
                "img_url": "http://heyni.oss-cn-beijing.aliyuncs.com/list/ibTzVVleJLrFuZOFdbQvFmzFvHxQ8BGnxj5eUyAL.jpeg?x-oss-process=image%2Fresize%2Cm_fixed%2Cl_400&OSSAccessKeyId=jvXdO4ZiFJSIbSmt&Expires=1535683071&Signature=HA1pzUtBZrC3lgib9ZpjC4sRbOo%3D"
            }
        }
        showInfo(data)
    },1000)

    function showInfo(data){
        $('.article-imag').src= data.data.image_url;
        $('.article-name').text(data.data.book_title);
        var second = parseInt(data.data.radio_time%60);
        var minuth = parseInt(data.data.radio_time/60)
        var time = (minuth< 10 ? '0'+minuth: minuth) +":"+ (second<10 ? '0'+ second:second)
        $('.all-play-time').text(time)
        showContent(data)

        loading(data.data.radio_url, data.data.radio_time,data)
    }
    var index = -1;
    function isScrolledIntoView(el) {
        var rect = el.getBoundingClientRect();
        var elemTop = rect.top;
        var elemBottom = rect.bottom;
        var parent = $(el).parent().parent()[0].getBoundingClientRect();
        var parentBottom = parent.bottom;
        var parentTop = parent.top;

        return  elemBottom < (parentBottom-69) && (parentTop + 69 - 15) < elemTop;

    }
    function setPlayLine(current, alltime, data){
        $('.play-time').css('width',current/alltime*100+'%')
        //向下取整
        var current_time = Math.floor(current);
        var all_audio_paragraphs = data.data.audio_paragraphs;
        for (var i = 0; i < all_audio_paragraphs.length; i ++)
        {
            index = -1;
            var start_at = all_audio_paragraphs[i].start_at;
            if (current_time == start_at)
            {
                index = i;
                break;
            }
        }
        if (index > -1)
        {
            var scroll_top = 0;
            if (index == 0)
            {
                $('.article').scrollTop(0);
            }
            if(!isScrolledIntoView($('.article-content')[index*2])){
                scroll_top = $('.article-content')[index*2].offsetTop;
                $('.article').scrollTop(scroll_top - 69 + 15);
            }
            $(".article-content").removeClass('blue')
            $($(".article-content")[index*2]).addClass("blue");
        }
    }

    function showContent(data){
        var content = '<div class="js-article-content"><div class="article-title">'+ data["data"]["zh_title"]+'</div>'
        for(var i =0 ; i< data.data.audio_paragraphs.length; i++){
            content += '<div class="article-content">'+data.data.audio_paragraphs[i]["zh_text"]+' </div>'
            content += '<div class="article-content">'+data.data.audio_paragraphs[i]["en_text"]+' </div>'
        }
        content += '</div>';

        $("#article_content").html(content);
    }

    function loading(url,allTime,data){
        var mp3 = audioComponent.create({
            src: url,
            autoplay: false,
            loop: true,
            btnPlay: ".js-play",
            btnPause: ".js-stop",
            slideBar: ".slidebar",
            slideThumb: ".slide-thumb",
            seeked: function(duration) {
                var totalTimeText = timeFormat(duration);
                $('.all-play-time').text(totalTimeText)
            },
            playing: function(curtime, duration) {
                setPlayLine(curtime, allTime,data)
                if(curtime>=allTime){
                    // $('.js-play').removeClass('hidden')
                    // $('.js-stop').addClass('hidden')
                    mp3.currentTime=0;
                    mp3.audio.currentTime=0

                }
                var curTimeText = timeFormat(curtime);
                $('.played-time').text(curTimeText)

            },
        });

    }
</script>
</body>
</html>
